Day36 風琴萬種

簡單小語

原來做了這麼久的收合選單，這種樣式叫做手風琴選單啊！果然風琴萬種(什麼爛梗……)無知如小魯的我，看了下樣板覺得可以更改樣式，讓展開的為圖片，並注意一些該圓角的小細節，其中卡關卡超久在JQuery的部分，如何讓預設展開情況下點擊後回到跟原先預設的動畫效果相同，一開始不以為意認為不難，結果做下去重重卡關，最後開啟開發者工具，一步步釐清典籍後該做什麼不該做什麼，才將樣式動畫給完成，不過在class的轉場動畫卻遲遲卡關，能力依舊不足，仍須努力找出方法並成功製作切換class的轉場動畫。

筆記分享

1. 控制好html結構，具備彈性及修改姓，讓統一樣式利用統一class管理，寬高使用%來做自適應，這是我近期撰寫給自己的目標。
2. 因兩個選單樣式基本相同，因此利用共同class製作樣式，再加入不同的font-awesome，可以大幅減少程式碼的撰寫。
3. padding及margin皆使用%來推移，習慣再習慣。
4. li中的div，a，pic等等位置結構須注意，才能讓點擊時出現圖片並是在li下呈現。每每練習都需要重新思考，功力不足。
5. 動態更換class使用toggleClass()並再點擊時讓其他siblings取消class，用說的有點繞口，需靜下心來思考每一步動作。
6. 翻轉效果使用transform:translateY(-1)達成上下翻轉。
7. 邏輯思考處在翻轉效果地方卡超久，經過動作拆解及看開發者工具點擊後的增減class完成動畫樣式。
8. menn呈現四邊圓角，利用:first-child()及.pic5及.pic10來設定圓角(釐清結構即可輕易上手)。
9. 加入持續練習的To Do List，程式邏輯真的比CSS難上一個層級，只能靠不斷練習累積經驗。
10. 圖片呈現皆用slideToggle完成樣式轉換(腦袋想不到其他的啊!!!)，用了transform:scale(0)但依舊占住空間。

持續練習

Practice(200902 Day 36)

樣板來源

Material design Accordion — Bootstrap v3

2020 iT邦幫忙鐵人賽 Day36 網頁前端-持續練習(風琴萬種)